{% extends 'base.html' %}
{% load static %}
{% load dict_extras %}
{% block content %}
<div class="container">
  <h2>结果查询</h2>
  <form method="get" action="" class="mb-3">
    <div class="row g-2 align-items-end">
      {% if mode == 'list' %}
      <div class="col-auto">
        <label class="form-label">搜索</label>
        <input type="text" name="q" value="{{q}}" class="form-control" placeholder="全文搜索/ID" />
      </div>
      <div class="col-auto">
        <label class="form-label">主题</label>
        <input type="text" name="email_subject" value="{{email_subject}}" class="form-control" placeholder="邮件主题" />
      </div>
      <div class="col-auto">
        <label class="form-label">PO号</label>
        <input type="text" name="po_no" value="{{po_no}}" class="form-control" placeholder="委托单号/PO" />
      </div>
      <div class="col-auto">
        <label class="form-label">状态</label>
        <select name="status" class="form-select">
          <option value="">全部</option>
          {% for s in statuses %}
            <option value="{{s}}" {% if status == s %}selected{% endif %}>{{s}}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-auto">
        <label class="form-label">场景</label>
        <select name="scene_id" class="form-select">
          <option value="">全部</option>
          {% for s in scenes %}
            <option value="{{s.id}}" {% if scene_id == s.id %}selected{% endif %}>{{s.name}}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-auto">
        <label class="form-label">邮箱</label>
        <select name="mailbox_id" class="form-select">
          <option value="">全部</option>
          {% for m in mailboxes %}
            <option value="{{m.id}}" {% if mailbox_id == m.id %}selected{% endif %}>{{m.name}}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-auto">
        <label class="form-label">运行起始日期</label>
        <input type="date" name="date_from" value="{{date_from}}" class="form-control" />
      </div>
      <div class="col-auto">
        <label class="form-label">运行结束日期</label>
        <input type="date" name="date_to" value="{{date_to}}" class="form-control" />
      </div>
      <!-- <div class="col-auto">
        <label class="form-label">每页</label>
        <input type="number" min="1" max="100" name="page_size" value="{{page_size}}" class="form-control" />
      </div> -->
      <div class="col-auto">
        <label class="form-label">每页</label>
        <select name="page_size" class="form-select">
          <option value="10" {% if page_size == 10 %}selected{% endif %}>10</option>
          <option value="20" {% if page_size == 20 %}selected{% endif %}>20</option>
          <option value="30" {% if page_size == 30 %}selected{% endif %}>30</option>
          <option value="50" {% if page_size == 50 %}selected{% endif %}>50</option>
          <option value="100" {% if page_size == 100 %}selected{% endif %}>100</option>
        </select>
      </div>
      <div class="col-auto">
        <button type="submit" class="btn btn-primary">查询</button>
        <a class="btn btn-light" href="{% url 'browse_model' 'ExtractionRun' %}">重置</a>
        <a class="btn btn-success" href="{% url 'browse_create' 'ExtractionRun' %}">新增</a>
      </div>
      {% endif %}
    </div>
  </form>

  {% if mode == 'list' %}
    <div class="table-responsive">
      <table class="table table-striped table-sm align-middle">
        <thead>
          <tr>
            {% for col in field_names %}
              <th>{{col}}</th>
            {% endfor %}
            <th style="width:140px">操作</th>
          </tr>
        </thead>
        <tbody>
          {% for row in rows %}
            <tr>
	            {% for col in field_names %}
                <td>{{ row|get_item:col }}</td>
              {% endfor %}  
              <td>
                <a class="btn btn-outline-primary btn-sm" href="{% url 'browse_detail' 'ExtractionRun' row.pk %}">详情</a>
                <a class="btn btn-outline-secondary btn-sm" href="{% url 'browse_edit' 'ExtractionRun' row.pk %}">编辑</a>
                <a class="btn btn-outline-danger btn-sm" href="{% url 'browse_delete' 'ExtractionRun' row.pk %}">删除</a>
              </td>
            </tr>
          {% empty %}
            <tr><td colspan="99" class="text-center text-muted">暂无数据</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <nav aria-label="分页">
      <ul class="pagination">
        {% if page_obj.has_previous %}
          <li class="page-item"><a class="page-link" href="?{% if query_string %}{{query_string}}&{% endif %}page={{page_obj.previous_page_number}}">上一页</a></li>
        {% else %}
          <li class="page-item disabled"><span class="page-link">上一页</span></li>
        {% endif %}
        <li class="page-item disabled"><span class="page-link">第 {{page_obj.number}} / {{page_obj.paginator.num_pages}} 页</span></li>
        {% if page_obj.has_next %}
          <li class="page-item"><a class="page-link" href="?{% if query_string %}{{query_string}}&{% endif %}page={{page_obj.next_page_number}}">下一页</a></li>
        {% else %}
          <li class="page-item disabled"><span class="page-link">下一页</span></li>
        {% endif %}
      </ul>
    </nav>
  {% endif %}

  {% if mode == 'detail' %}
    <div class="card mb-3">
      <div class="card-header">ExtractionRun 详情</div>
      <div class="card-body">
        <dl class="row">
          {% for k,v in fields %}
            <dt class="col-sm-3">{{k}}</dt>
            <dd class="col-sm-9"><pre class="mb-0" style="white-space: pre-wrap;">{{v}}</pre></dd>
          {% endfor %}
        </dl>
        <a class="btn btn-secondary" href="{% url 'browse_model' 'ExtractionRun' %}">返回列表</a>
        <a class="btn btn-primary" href="{% url 'browse_edit' 'ExtractionRun' object.pk %}">编辑</a>
      </div>
    </div>

      <div class="card mb-3">
        <div class="card-header">EmailMessage 详情</div>
        <div class="card-body">
          <dl class="row">
            {% for k,v in email_details %}
              <dt class="col-sm-3">{{k}}</dt>
              <dd class="col-sm-9"><pre class="mb-0" style="white-space: pre-wrap;">{{v}}</pre></dd>
            {% endfor %}
          </dl>
        </div>
      </div>

      <div class="card mb-3">
        <div class="card-header">ExtractionResult 列表</div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-sm table-striped">
              <thead><tr><th>field</th><th>value</th><th>confidence</th><th>source</th></tr></thead>
              <tbody>
                {% for r in results %}
                  <tr>
                    <td>{{r.field}}</td>
                    <td><pre class="mb-0" style="white-space: pre-wrap;">{{r.value}}</pre></td>
                    <td>{{r.confidence}}</td>
                    <td>{{r.source}}</td>
                  </tr>
                {% empty %}
                  <tr><td colspan="4" class="text-muted">暂无结果</td></tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
  {% endif %}

  {% if mode == 'form' %}
    <div class="card">
      <div class="card-header">ExtractionRun {% if form_mode == 'create' %}新增{% else %}编辑{% endif %}</div>
      <div class="card-body">
        <form method="post">
          {% csrf_token %}
          {{ form.as_p }}
          <button type="submit" class="btn btn-primary">保存</button>
          <a class="btn btn-secondary" href="{% url 'browse_model' 'ExtractionRun' %}">取消</a>
        </form>
      </div>
    </div>
  {% endif %}

  {% if mode == 'delete' %}
    <div class="alert alert-warning">确定要删除该记录吗？该操作不可恢复。</div>
    <form method="post">
      {% csrf_token %}
      <button type="submit" class="btn btn-danger">确认删除</button>
      <a class="btn btn-secondary" href="{% url 'browse_model' 'ExtractionRun' %}">取消</a>
    </form>
  {% endif %}
</div>
{% endblock %}